<template>
	<view class="index-tab">
		<view class="index-tab-header">
			<image src="https://zsw-bimface-res.izsw.net/img/bim-community/%E7%9F%A9%E5%BD%A2%201.png"
				mode="aspectFill"></image>
			<view class="header">
				<p v-for="(item, index) in headList" :key="index" @click="changeTab(index + 1)"
					:class="{ active: activeTab === index + 1 }">{{ item }}</p>
			</view>
		</view>
		<view class="index-tab-content">
			<!-- <view class="index_classify">全部</view> -->
			<view v-if="activeTab === 1" :class="{ 'index-tab-content-1': isVisible }">
				<view class="item-container-copy" v-for="(item, index) in personalRewards" :key="index"
					v-if="isVisible">
					<view class="top-photo">
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="copy-title">{{ item.name }}</view>
					<view class="copy-small">
						<view v-for="(icon, iconIndex) in item.boxSkuVo"
							:class="{ 'selectedicon': iconIndexId === icon.id }" @click="toggleClass(icon.id)"
							:key="iconIndex">
							<image :src="icon.detailImages" mode="aspectFill"></image>
						</view>
					</view>
					<view class="copy-immide">
						<view class="price-c">
							{{ item.price }}<text style="font-size: 30rpx;">镇北币</text>
						</view>
						<view class="purchase-now" @click="toboxDetails(item.id)">
							立即购买
						</view>
					</view>
				</view>
				<view class="item-container" v-if="!isVisible" v-for="item in personalRewards">
					<view class="left-content">
						<!-- 首页镂空图片 -->
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="right-content">
						<view class="title1">{{ item.name }}</view>
						<text class="probability">超高几率抽到{{ item.name }}</text>
						<view class="bottom" style="display: inline-block;">
							<view class="small">
								<view v-for="(icon, iconIndex) in item.boxSkuVo"
									:class="{ 'selectedicon': iconIndexId === icon.id }" @click="toggleClass(icon.id)"
									:key="iconIndex">
									<image :src="icon.detailImages" mode="aspectFill"></image>
								</view>
							</view>
							<view class="immide">
								<view class="left">
									<view class="price-c">
										{{ item.price }}<text style="font-size: 30rpx;">镇北币</text>
									</view>
									<view class="purchase-now" @click="toboxDetails(item.id)">
										立即购买
									</view>
								</view>
								<!-- <image src="../../static/manghe/b7f8498be7d2ad7eea9c33b0de1bd08c.gif" mode=""></image> -->
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noData_box" v-if="showNoData">
				<NoData></NoData>
			</view>
			<view v-if="activeTab === 2" :class="{ 'index-tab-content-1': isVisible }">
				<view class="item-container-copy" v-for="(item, index) in goodsList" :key="index" v-if="isVisible">
					<view class="top-photo">
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="copy-title">{{ item.name }}</view>
					<view class="copy-small">
						<view v-for="(icon, iconIndex) in item.boxSkuVo"
							:class="{ 'selectedicon': iconIndexId === icon.id }" @click="toggleClass(icon.id)"
							:key="iconIndex">
							<image :src="icon.detailImages" mode="aspectFill"></image>
						</view>
					</view>
					<view class="copy-immide">
						<view class="price-c">
							{{ item.price }}<text style="font-size: 30rpx;">镇北币</text>
						</view>
						<view class="purchase-now" @click="toDatails(item.id)">
							立即购买
						</view>
					</view>
				</view>
				<view class="item-container" v-if="!isVisible" v-for="item in goodsList">
					<view class="left-content">
						<!-- 首页镂空图片 -->
						<image :src="item.thumb" mode="aspectFill"></image>
					</view>
					<view class="right-content">
						<view class="title1">{{ item.name }}</view>
						<text class="probability">超高几率抽到{{ item.name }}</text>
						<view class="bottom" style="display: inline-block;">
							<view class="small">
								<view v-for="(icon, iconIndex) in item.boxSkuVo"
									:class="{ 'selectedicon': iconIndexId === icon.id }" @click="toggleClass(icon.id)"
									:key="iconIndex">
									<image :src="icon.detailImages" mode="aspectFill"></image>
								</view>
							</view>
							<view class="immide">
								<view class="left">
									<view class="price-c">
										<text style="font-size: 30rpx;">￥</text>{{ item.price }}
									</view>
									<view class="purchase-now" @click="toDatails(item.id)">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="noData_box" v-if="showNoData">
				<NoData></NoData>
			</view> -->
			<view v-if="activeTab === 3" :class="{ 'index-tab-content-1': isVisible }">
				<view class="item-container-copy" v-for="(item, index) in yifanshangList" :key="index" v-if="isVisible">
					<view class="top-photo">
						<image :src="item.thumb" mode=""></image>
					</view>
					<view class="copy-title">{{ item.name }}</view>
					<view class="copy-small">
						<view v-for="(icon, iconIndex) in item.boxSkuVo" :key="iconIndex">
							<image :src="icon.detailImages" mode=""></image>
						</view>
					</view>
					<view class="copy-immide">
						<view class="price-c">
							<text style="font-size: 30rpx;">￥</text>{{ item.price }}
						</view>
						<view class="purchase-now" @click="toyifanshang(item.id)">
							立即购买
						</view>
					</view>
				</view>
				<view class="item-container" v-if="!isVisible" v-for="item in yifanshangList">
					<view class="left-content">
						<!-- 首页镂空图片（死的） -->
						<image :src="item.thumb" mode=""></image>
					</view>
					<view class="right-content">
						<view class="title1">{{ item.name }}</view>
						<text class="probability">超高几率抽到{{ item.name }}</text>
						<view class="bottom" style="display: inline-block;">
							<view class="small">
								<view v-for="(icon, iconIndex) in iconList" :key="iconIndex">
									<image :src="icon" mode=""></image>
								</view>
							</view>
							<view class="immide">
								<view class="left">
									<view class="price-c">
										<text style="font-size: 30rpx;">￥</text>{{ item.price }}
									</view>
									<view class="purchase-now" @click="toyifanshang(item.id)">
										立即购买
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
			<!-- <view class="noData_box" v-if="showNoData">
				<NoData></NoData>
			</view> -->
		</view>
	</view>
</template>

<script>
import {
	boxAll,
	boxList,
	yifangshi,
} from "@/api/blind.js"
export default {
	name: "IndexTab",
	props: {
		isVisible: Boolean,
		tab:String
	},
	data() {
		return {
			activeTab: 1,
			headList: ["个人赏", "无限赏", "一番赏", "全部"],
			// 无限赏列表
			goodsList: [],
			// 个人赏列表
			personalRewards: [],
			// 一番赏列表
			yifanshangList: [],
			iconIndexId: null, //点击图片的id
			showNoData: false, // 是否显示无数据
		}
	},
	computed: {},
	created() {
		this.activeTab = this.tab ? this.tab: 1
		this.changeTab(this.activeTab)
	},
	methods: {
		// 跳转无线赏详情
		toDatails(id) {
			uni.navigateTo({
				url: '../blind/index/details/copydetails?boxId=' + id,
			});
		},
		//跳转个人赏详情
		toboxDetails(id) {
			uni.navigateTo({
				url: '/pages/peopleDetails/message?boxId=' + id,
			});
		},
		// 跳转一番赏详情
		toyifanshang(id) {
			uni.redirectTo({
				url: '/pages/playMarket/zhanchui?boxId=' + id
			});
		},
		changeTab(index) {
			this.showNoData = false;
			this.activeTab = index;
			if (this.activeTab == 1) {
				boxList().then(res => {
					this.personalRewards = res.data.list;
					if (res.data.list.length < 1) {
						this.showNoData = true
					}
				});
			} else if (this.activeTab == 2) {
				boxAll({
					type: this.activeTab
				}).then(res => {
					this.goodsList = res.data.list;
					if (res.data.list.length < 1) {
						this.showNoData = true
					}
				});
			} else if (this.activeTab == 3) {
				yifangshi().then(res => {
					this.yifanshangList = res.data.list;
					if (res.data.list.length < 1) {
						this.showNoData = true
					}
				});
			} else if (this.activeTab == 4) {
				uni.redirectTo({
					url: '/pages/classification/classification',
				});
			}

		},
		toggleClass(iconid) {
			this.iconIndexId = iconid
		},
	}
}
</script>

<style lang="scss">
.index-tab {
	width: 90%;
	// height: 100%;
	margin: 0 auto;

	.index-tab-header {
		width: 100%;
		height: 70rpx;
		position: relative;

		image {
			width: 100%;
			height: 100%;
		}

		.header {
			position: absolute;
			top: 0;
			display: flex;
			width: 100%;
			justify-content: space-around;
			box-sizing: border-box;
			padding: 0 10rpx;

			p {
				box-sizing: border-box;
				color: #ffffff;
				width: 102rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-weight: 900;
				font-size: 34rpx;
				text-align: center;
				position: relative;
				z-index: 2;

				&.active {
					&::after {
						content: '';
						position: absolute;
						bottom: 0;
						left: 6rpx;
						width: 90%;
						height: 12rpx;
						border-radius: 10rpx;
						background-color: rgb(232, 117, 148);
						z-index: -1;
						transform: translateY(-12rpx); // 负值表示向上移动
					}
				}
			}
		}
	}

	.index-tab-content {
		width: 100%;
		background-image: url('https://zsw-bimface-res2.izsw.net/img/bim-community/%E8%92%99%E7%89%88%E5%88%86%E7%BB%84.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		padding: 10rpx 0 100rpx 0;
		z-index: 1;
		position: relative;

		.index_classify {
			margin-left: 20rpx;
			width: 40%;
			height: 60rpx;
			color: #ffffff;
			background-color: rgb(108, 67, 255);
			border-radius: 10rpx;
			text-align: center;
			line-height: 60rpx;
		}

		.item-container {
			width: 96%;
			// height: 350rpx;
			background: url("../../static/manghe/0cade2c2407a4ddd17e5936099381e72.png") no-repeat;
			background-size: cover;
			// box-shadow: 0px 4px 16px 0px rgba(226, 222, 204, 0.6);
			position: relative;
			display: flex;
			margin: 20rpx auto;
			z-index: 999;
			border-radius: 10rpx;
			border: 1rpx solid rgb(101, 48, 217);

			/* border: 1px solid red; */

			.left-content {
				position: relative;
				width: 180rpx;
				height: 180rpx;
				flex: 0 0 180rpx;
				border-radius: 10rpx;
				margin: 100rpx 20rpx 0rpx 20rpx;
				overflow: hidden;

				image {
					width: 100%;
					height: 100%;
				}

				.thumb {
					width: 100%;
					height: 100%;
				}

				.expired-mask {
					width: 100%;
					height: 100%;
					position: absolute;
					right: 0rpx;
					top: 0rpx;
					background: rgba(0, 0, 0, 0.5);
					display: flex;
					align-items: center;
					justify-content: center;

					.mask-icon {
						width: 112rpx;
						height: 84rpx;
					}
				}
			}


			.right-content {
				position: relative;
				flex-grow: 1;
				padding-bottom: 24rpx;

				.status {
					font-size: 24rpx;
					height: 20rpx;
					// border: 1px solid red;
					overflow: hidden;
					padding-right: 20rpx;

					&.working,
					&.pending {
						background: url(@/static/activity/status-bg-working.png);
						background-size: 180rpx 70rpx;
						background-repeat: no-repeat;
						background-position-x: right;
						color: white;
					}

					&.expired {
						color: rgba(153, 153, 153, 1);
						background: url(@/static/activity/status-bg-expired.png);
						background-size: 180rpx 70rpx;
						background-repeat: no-repeat;
						background-position-x: right;
					}

					.text {
						width: 130rpx;
						text-align: center;
						display: block;
						float: right;
						line-height: 56rpx;
						font-weight: 500;
					}
				}

				.title1 {
					width: 400rpx;
					font-weight: bold;
					color: #ffffff;
					line-height: 40rpx;
					font-size: 30rpx;
					min-height: 60rpx;
					padding-right: 20rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					// display: -webkit-box;
					// -webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					margin-top: 40rpx;
				}

				.probability {
					max-width: 76%;
					height: 44rpx;
					display: inline-block;
					background-color: rgba(80, 86, 114, 1);
					color: rgb(136, 250, 250);
					padding: 6rpx 16rpx;
					border-radius: 30rpx;
					white-space: nowrap;
					/* 防止文本换行 */
					overflow: hidden;
					/* 隐藏超出部分 */
					text-overflow: ellipsis;
					/* 显示省略号 */
					vertical-align: top;
					/* 确保垂直对齐 */
				}

				.sub-title {
					font-size: 28rpx;
				}

				.time {
					color: #999999;
					font-size: 26rpx;
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;
					color: #999999;
					font-size: 26rpx;
					padding-right: 30rpx;
					margin-top: 10rpx;
					// position: absolute;
					// bottom: 30rpx;
					width: 100%;
					box-sizing: border-box;
					font-weight: 500;
					flex-wrap: wrap;

					.left {
						width: 404rpx;
						display: flex;
						justify-content: flex-end;
						align-items: center;
						margin-top: 20rpx;

						.price-c {
							display: flex;
							align-items: center;
							/* // color: red; */
							// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
							background-image: -webkit-linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
							font-size: 45rpx;
							align-items: baseline;
						}

						.purchase-now {
							margin-left: 20rpx;
							width: 40%;
							height: 60rpx;
							color: #ffffff;
							background-color: rgb(108, 67, 255);
							border-radius: 10rpx;
							text-align: center;
							line-height: 60rpx;
						}
					}

					.lottery-total,
					.city,
					.live-platform {
						height: 36rpx;
						background: #FFFAE8;
						border-radius: 18rpx;
						padding: 0rpx 20rpx;
						box-sizing: border-box;
						line-height: 36rpx;
						color: white;
						font-size: 22rpx;
						font-weight: 500;
						color: #FFCC09;
						// flex: 0 0 110rpx;
						text-align: center;
					}
				}

				.small {
					width: 404rpx;
					height: 90rpx;
					white-space: nowrap;
					overflow-x: auto;
					display: flex;
					margin-top: 20rpx;

					// .selectedicon {
					// 	border: 1rpx solid rgb(108, 67, 255);
					// 	background: black;
					// }

					view {
						width: 70rpx;
						height: 70rpx;
						flex: 0 0 auto;
						border: 1rpx solid white;
						margin-right: 10rpx;
						border-radius: 10rpx;
						text-align: center;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 75%;
							height: 75%;
						}
					}
				}
			}

			&.theme-2 {
				overflow: hidden;
				margin: 30rpx 0rpx 20rpx 0rpx;

				.left-content {

					top: 0rpx;
					height: 100%;
					margin: 0rpx 20rpx 0rpx 0rpx;
					border-radius: 0rpx;
				}
			}

		}

		.index-tab-content-1 {
			width: 100%;
			padding: 10rpx 0rpx;
			display: flex;
			flex-wrap: wrap;
		}

		.item-container-copy {
			width: 47%;
			background-image: url('https://zsw-bimface-res.izsw.net/img/bim-community/Rectangle%201385.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
			align-content: flex-start;
			margin-bottom: 20rpx;
			margin-left: 14rpx;

			.top-photo {
				width: 80%;
				height: 250rpx;
				margin-top: 30rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
			}

			.copy-title {
				width: 80%;
				color: #ffffff;
				margin-top: 20rpx;
			}

			.copy-small {
				width: 80%;
				height: 100rpx;
				white-space: nowrap;
				overflow-x: auto;
				display: flex;
				margin-top: 20rpx;

				.selectedicon {
					border: 1rpx solid rgb(108, 67, 255);
					background: black;
				}

				view {
					width: 70rpx;
					height: 70rpx;
					flex: 0 0 auto;
					border: 1rpx solid white;
					margin-right: 10rpx;
					border-radius: 10rpx;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						width: 75%;
						height: 75%;
					}
				}
			}

			.copy-immide {
				width: 80%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				margin: 20rpx 0;

				.price-c {
					width: 40%;
					display: flex;
					align-items: center;
					// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
					background-image: -webkit-linear-gradient(0deg, rgb(255, 255, 255), rgb(255, 255, 255), rgb(255, 255, 255));
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
					font-size: 45rpx;
					align-items: baseline;
				}

				.purchase-now {
					margin-left: 20rpx;
					width: 52%;
					height: 60rpx;
					color: #ffffff;
					background-color: rgb(108, 67, 255);
					border-radius: 10rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
	}

}
</style>